<%--
  Created by IntelliJ IDEA.
  User: wheelchen
  Date: 2017/10/2
  Time: 13:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script> -->
<html></html>
<script type="text/javascript" src="/static/common/pdf/pdf.js"></script>
<h1>PDF.js 'Hello, world!' example</h1>

<div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>
    &nbsp; &nbsp;
    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>

<canvas id="the-canvas"></canvas>

<script type="text/javascript">
    // If absolute URL from the remote server is provided, configure the CORS
    // header on that server.
    var url = '/static/upload/hello.pdf';

    // Disable workers to avoid yet another cross-origin issue (workers need
    // the URL of the script to be loaded, and dynamically loading a cross-origin
    // script does not work).
    // PDFJS.disableWorker = true;

    // The workerSrc property shall be specified.
    // PDFJS.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

    /**
     * 显示pdf
     *
     * @param {String} url pdf地址
     */
    function showPdf(url) {
        PDFJS.workerSrc = '/static/common/pdf/pdf.worker.js';

        var pdfDoc = null,
            pageNum = 1,
            pageRendering = false,
            pageNumPending = null,
            scale = 0.8,
            canvas = document.getElementById('the-canvas'),
            ctx = canvas.getContext('2d');

        /**
         * Get page info from document, resize canvas accordingly, and render page.
         * @param num Page number.
         */
        function renderPage(num) {
            pageRendering = true;
            // Using promise to fetch the page
            pdfDoc.getPage(num).then(function(page) {
                var viewport = page.getViewport(scale);
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                };
                var renderTask = page.render(renderContext);

                // Wait for rendering to finish
                renderTask.promise.then(function() {
                    pageRendering = false;
                    if (pageNumPending !== null) {
                        // New page rendering is pending
                        renderPage(pageNumPending);
                        pageNumPending = null;
                    }
                });
            });

            // Update page counters
            document.getElementById('page_num').textContent = pageNum;
        }

        /**
         * If another page rendering in progress, waits until the rendering is
         * finised. Otherwise, executes rendering immediately.
         */
        function queueRenderPage(num) {
            if (pageRendering) {
                pageNumPending = num;
            } else {
                renderPage(num);
            }
        }

        /**
         * Displays previous page.
         */
        function onPrevPage() {
            if (pageNum <= 1) {
                return;
            }
            pageNum--;
            queueRenderPage(pageNum);
        }
        document.getElementById('prev').addEventListener('click', onPrevPage);

        /**
         * Displays next page.
         */
        function onNextPage() {
            if (pageNum >= pdfDoc.numPages) {
                return;
            }
            pageNum++;
            queueRenderPage(pageNum);
        }
        document.getElementById('next').addEventListener('click', onNextPage);

        /**
         * Asynchronously downloads PDF.
         */
        PDFJS.getDocument(url).then(function(pdfDoc_) {
            pdfDoc = pdfDoc_;
            document.getElementById('page_count').textContent = pdfDoc.numPages;

            // Initial/first page rendering
            renderPage(pageNum);
        });
    }

    showPdf(url);

    // Asynchronous download of PDF
//    var loadingTask = PDFJS.getDocument(url);
//    loadingTask.promise.then(function(pdf) {
//        console.log('PDF loaded');
//
//        // Fetch the first page
//        var pageNumber = 1;
//        pdf.getPage(pageNumber).then(function(page) {
//            console.log('Page loaded');
//
//            var scale = 1.5;
//            var viewport = page.getViewport(scale);
//
//            // Prepare canvas using PDF page dimensions
//            var canvas = document.getElementById('the-canvas');
//            var context = canvas.getContext('2d');
//            canvas.height = viewport.height;
//            canvas.width = viewport.width;
//
//            // Render PDF page into canvas context
//            var renderContext = {
//                canvasContext: context,
//                viewport: viewport
//            };
//            var renderTask = page.render(renderContext);
//            renderTask.then(function () {
//                console.log('Page rendered');
//            });
//        });
//    }, function (reason) {
//        // PDF loading error
//        console.error(reason);
//    });
</script>
